<template>
  <div class="container">
    <div class="search">
      <el-autocomplete v-model="state" placeholder="请输入医院名称" :trigger-on-focus="false" :fetch-suggestions="querySearch"
        @select="goDetail" />
      <el-button type="primary" class="search_btn">
        <el-icon>
          <Search />
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { hospital_search } from '../../api/home/index';
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const $router = useRouter()
const state = ref('');
// 展开搜索建议
let querySearch = async (queryString: any, cb: any) => {
  console.log(queryString);//搜索词
  let result = await hospital_search(queryString)
  if (result.code === 200) {
    let showData = result.data.map((item: any) => {
      return {
        value: item.hosname,
        hoscode: item.hoscode
      }
    })
    cb(showData) //把接口数据返回到搜索框
  }
  else {
    console.log("请求错误!");
  }
}
// 点击建议跳转连接
let goDetail = (item: any) => {
  console.log(item.hoscode);
  $router.push({ path: '/hospital/booking' })
}


</script>

<style scoped lang="scss">
.container {
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .search {
    ::v-deep .el-input__wrapper {
      width: 820px;
      height: 38px;
    }

    ::v-deep .el-input__inner {
      font-size: 16px;
    }

    .search_btn {
      height: 40px;
      width: 60px;
      font-size: 25px;
    }
  }
}
</style>